
var quickview = (quickview || {});

quickview.initialize = function (fillWidth, boxMinHeight) {

    jQuery(document).ready(function ($) {
        //final width --> this is the quick view image slider width
        //maxQuickWidth --> this is the max-width of the quick-view panel
        var sliderFinalWidth = 400;
        var maxQuickWidth = 900;
        var slectedIndex;

        $('div.quickview').waitForImages(function () {
            window.setTimeout(showQuickView, 300);
        });

        function showQuickView() {

            if ($('div.quickview').css('display') == 'none') {
                $('div.quickview').fadeOut("slow", function () {
                    $('div.quickview').fadeIn("slow");
                });
            }
        }

        $('div.quickview').css({ 'width': fillWidth });
        $('.cd-item img').css({ 'min-height': boxMinHeight });

        //open the quick view panel
        $('.cd-trigger').on('click', function (event) {
            (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
            var selectedImage = $(this).parent('.cd-item').children('img'),
                slectedImageUrl = selectedImage.attr('src');
            slectedIndex = '#' + $(this).attr('href');

            animateQuickView(selectedImage, sliderFinalWidth, maxQuickWidth, 'open');

        });


        $(document).keyup(function (event) {
            //check if user has pressed 'Esc'
            if (event.which == '27') {
                closeQuickView(sliderFinalWidth, maxQuickWidth);
            }
        });

        $('.cd-close').on('click', function () {
            (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
            closeQuickView(sliderFinalWidth, maxQuickWidth);
        });

        //center quick-view on window resize
        $(window).on('resize', function () {
            if ($(slectedIndex).hasClass('is-visible')) {
                window.requestAnimationFrame(resizeQuickView);
            }
        });


        function resizeQuickView() {
            var quickViewLeft = ($(window).width() - $(slectedIndex).width()) / 2,
                quickViewTop = ($(window).height() - $(slectedIndex).height()) / 2;
            $(slectedIndex).css({
                "top": quickViewTop,
                "left": quickViewLeft,
            });
        }

        function closeQuickView(finalWidth, maxQuickWidth) {
            var close = $('.cd-close'),
                activeSliderUrl = close.siblings('.cd-slider-wrapper').find('.selected img').attr('src'),
                selectedImage = $('.empty-box').find('img');
            //update the image in the gallery
            if (!$(slectedIndex).hasClass('velocity-animating') && $(slectedIndex).hasClass('add-content')) {
                //selectedImage.attr('src', activeSliderUrl);
                animateQuickView(selectedImage, finalWidth, maxQuickWidth, 'close');
            } else {
                closeNoAnimation(selectedImage, finalWidth, maxQuickWidth);
            }
        }

        function animateQuickView(image, finalWidth, maxQuickWidth, animationType) {


            //store some image data (width, top position, ...)
            //store window data to calculate quick view panel position
            var parentListItem = image.parent('.cd-item'),
                topSelected = image.offset().top - $(window).scrollTop(),
                leftSelected = image.offset().left,
                widthSelected = image.width(),
                heightSelected = image.height(),
                windowWidth = $(window).width(),
                windowHeight = $(window).height(),
                finalLeft = (windowWidth - finalWidth) / 2,
                finalHeight = finalWidth * heightSelected / widthSelected,
                finalTop = (windowHeight - finalHeight) / 2,
                quickViewWidth = (windowWidth * .8 < maxQuickWidth) ? windowWidth * .8 : maxQuickWidth,
                quickViewLeft = (windowWidth - quickViewWidth) / 2;

            if (animationType == 'open') {
                //hide the image in the gallery
                parentListItem.addClass('empty-box');
                //place the quick view over the image gallery and give it the dimension of the gallery image
                $(slectedIndex).css({
                    "top": topSelected,
                    "left": leftSelected,
                    "width": widthSelected,
                }).velocity({
                    //animate the quick view: animate its width and center it in the viewport
                    //during this animation, only the slider image is visible
                    'top': finalTop + 'px',
                    'left': finalLeft + 'px',
                    'width': finalWidth + 'px',
                }, 1000, [400, 20], function () {
                    //animate the quick view: animate its width to the final value
                    $(slectedIndex).addClass('animate-width').velocity({
                        'left': quickViewLeft + 'px',
                        'width': quickViewWidth + 'px',
                    }, 300, 'ease', function () {
                        //show quick view content
                        $(slectedIndex).addClass('add-content');
                    });
                }).addClass('is-visible');
            } else {
                //close the quick view reverting the animation
                $(slectedIndex).removeClass('add-content').velocity({
                    'top': finalTop + 'px',
                    'left': finalLeft + 'px',
                    'width': finalWidth + 'px',
                }, 300, 'ease', function () {
                    $(slectedIndex).removeClass('animate-width').velocity({
                        "top": topSelected,
                        "left": leftSelected,
                        "width": widthSelected,
                    }, 500, 'ease', function () {
                        $(slectedIndex).removeClass('is-visible');
                        parentListItem.removeClass('empty-box');
                    });
                });
            }
        }
        function closeNoAnimation(image, finalWidth, maxQuickWidth) {
            var parentListItem = image.parent('.cd-item'),
                topSelected = image.offset().top - $(window).scrollTop(),
                leftSelected = image.offset().left,
                widthSelected = image.width();

            //close the quick view reverting the animation
            parentListItem.removeClass('empty-box');
            $(slectedIndex).velocity("stop").removeClass('add-content animate-width is-visible').css({
                "top": topSelected,
                "left": leftSelected,
                "width": widthSelected,
            });
        }
    });
};


